<template>
  <table-header
          :queryList="queryList"
          @pagination="getDataList"
          :rightColSpan="8"
          :leftColSpan="16"
  >
    <template #filter>
      <el-select placeholder="选择素材类型" v-model="materialType" class="mr10" size="mini" @change="handleFilter">
        <el-option
                v-for="material in materialTypeList"
                :key="material.value"
                :label="material.label"
                :value="material.value"
        />
      </el-select>
      <el-input
              placeholder="请输入素材名称/SOURCEID"
              v-model="queryList.keyword"
              class="input-w" size="mini"
              clearable
              @clear="handleFilter"
              @keyup.enter="handleFilter"
      />
    </template>
    <template #operation>
      <el-button type="primary" size="mini" @click="handleCreateMaterial">
        <el-icon>
          <plus />
        </el-icon>
        选择添加素材
      </el-button>
    </template>
  </table-header>
  <table-data :tableData="tableData" :isloading="isloading">
    <template #main>
      <el-table-column label="预览" v-if="materialType == 'image'" width="60">
        <template #default="{row, $index}">
          <el-image
                  :src="getImageUrl(row, 2)"
                  :initial-index="$index"
                  :preview-src-list="imgSrcList"
          />
        </template>
      </el-table-column>
      <el-table-column label="素材名称">
        <template #default="{row}">
          <span v-if="materialType == 'image'">{{row.name}}</span>
          <a href="javascript:;" v-else @click="handleVideoPlay(row)">
            <el-icon>
              <video-play />
            </el-icon>
            {{row.name}}
          </a>
        </template>
      </el-table-column>
      <el-table-column label="视频类型" v-if="materialType == 'video'">
        <template #default="{row}">
          {{getVideoTypeName(row.videotype)}}
        </template>
      </el-table-column>
      <el-table-column label="画幅类型">
        <template #default="{row}">
          {{getLayoutName(row.layout)}}
        </template>
      </el-table-column>
      <el-table-column label="MIME类型" prop="mimetype" />
      <el-table-column label="分辨率">
        <template #default="{row}">
          <span v-if="row.extends && row.extends.width && row.extends.height">{{row.extends.width + ' * ' + row.extends.height}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="大小">
        <template #default="{row}">
          <span v-if="row.extends && row.extends.size">{{formatSize(row.extends.size)}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template #default="{row}">
          <el-button type="text" size="mini" style="color: red" @click="handleDeleteMaterial(row)">删除</el-button>
        </template>
      </el-table-column>
    </template>
  </table-data>
  <el-row class="mt10">
    <el-col :span="24">
      <table-pagination
              :queryList="queryList"
              :total="tableData.total"
              @pagination="getDataList"
      />
    </el-col>
  </el-row>
  <video-js
          ref="videoPlayRef"
          :videoTitle="videoTitle"
          :videoSrc="videoSrc"
          :videoType="videoType"
          :videoAutoPlay="videoAutoPlay"
          :dialogVisible="videoDialogVisible"
          @cancelVideoJs="cancelVideoJs"
  />
  <rel-image-medium
          ref="relImageMediumRef"
          :dialogRelImageVisible="dialogImageVisible"
          :dialogRelImageTitle="dialogImageTitle"
          :dialogRelImageMediaType="dialogImageMediatype"
          :dialogRelImageFormData="materialForm"
          dialogSelectType="checkbox"
          @handleCancelRelImageDialog="handleCancelRelImageDialog"
          @handleVideoPlay="handleVideoPlay"
          @reloadMediaData="getDataList"
  />
  <rel-video-medium
          ref="relVideoMediumRef"
          :dialogRelVideoVisible="dialogVideoVisible"
          :dialogRelVideoTitle="dialogVideoTitle"
          :dialogRelVideoMediatype="dialogVideoMediatype"
          :dialogRelVideoFormData="materialForm"
          dialogSelectType="checkbox"
          @handleCancelVideoDialog="handleCancelVideoDialog"
          @handleVideoPlay="handleVideoPlay"
          @reloadMediaData="getDataList"

  />
</template>

<script>
  import {ref, reactive, nextTick} from 'vue'
  import TableHeader from "@/views/public/TableHeader";
  import TableData from "@/views/public/TableData";
  import TablePagination from "@/views/public/TablePagination";
  import {Plus, VideoPlay} from "@element-plus/icons"
  import {
    getPackageImageMaterials,
    getPackageVideoMaterials,
    deletePackageRelImage,
    deletePackageRelVideo
  } from "@/api/package/material";
  import {formatSize,
    getImageUrl,
    getLayoutName,
    getVideoTypeName,
    getVideoPlayUrl,
    mimeTypeList
  } from "@/utils/usage-config";
  import VideoJs from "@/components/player/VideoJs";
  import {ElMessageBox, ElMessage} from 'element-plus'
  import RelImageMedium from "@/views/media/media/components/Medium/RelImageMedium";
  import RelVideoMedium from "@/views/media/media/components/Medium/RelVideoMedium";

  export default {
    name: "index",
    components: {
      TableHeader,
      TableData,
      TablePagination,
      Plus,
      VideoPlay,
      VideoJs,
      RelImageMedium,
      RelVideoMedium
    },
    props: {
      packageid: {
        type: Number,
        required: true
      }
    },
    setup(props) {
      const materialType = ref('image')
      const materialTypeList = ref([
        {label: '图片素材', value: 'image'},
        {label: '视频素材', value: 'video'}
      ])
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        packageid: props.packageid,
        keyword: undefined
      })
      const isloading = ref(false)
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const imgSrcList = ref([])
      const videoTitle = ref('')
      const videoSrc = ref('')
      const videoType = ref('')
      const videoAutoPlay = ref(true)
      const videoPlayRef = ref(null)
      const videoDialogVisible = ref(false)
      const deleteMaterialFormData = reactive({
        packageid: props.packageid,
        imgids: [],
        videoids: []
      })
      const materialForm = reactive({
        packageid: props.packageid,
        datas: []
      })
      /** 添加图片素材参数开始 **/
      const dialogImageVisible = ref(false)
      const dialogImageTitle = ref('')
      const dialogImageMediatype = ref('')
      const relImageMediumRef = ref(null)
      /** 添加图片素材参数结束 **/
      /** 添加视频素材参数开始 **/
      const dialogVideoVisible = ref(false)
      const dialogVideoTitle = ref('')
      const dialogVideoMediatype = ref('')
      const relVideoMediumRef = ref(null)
      /** 添加视频素材参数结束 **/

      /** 获取素材列表 **/
      const getDataList = () => {
        isloading.value = true
        if (materialType.value == 'image') {
          handleGetImageMaterials()
        } else {
          handleGetVideoMaterials()
        }
      }
      /** 获取图片素材列表 **/
      const handleGetImageMaterials = () => {
        isloading.value = true
        getPackageImageMaterials(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
          imgSrcList.value = []
          tableData.listData.forEach(row => {
            imgSrcList.value.push(getImageUrl(row, 1))
          })
        })
      }
      /** 获取视频素材列表 **/
      const handleGetVideoMaterials = () => {
        isloading.value = true
        getPackageVideoMaterials(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
        })
      }
      /** 数据过滤 **/
      const handleFilter = () => {
        queryList.page = 1
        getDataList()
      }
      /** 预览视频 **/
      const handleVideoPlay = (row) => {
        videoTitle.value = row.name
        videoDialogVisible.value = true
        videoSrc.value = getVideoPlayUrl(row)
        if (row.isself === undefined) {
          videoType.value = mimeTypeList[row.mimeid] ? mimeTypeList[row.mimeid] : 'video/mp4'
        }  else {
          videoType.value = row.mimetype ? row.mimetype : 'video/mp4'
        }

        nextTick(() => {
          videoPlayRef.value.init()
        })
      }
      /** 关闭视频播放弹框 **/
      const cancelVideoJs = () => {
        videoDialogVisible.value = false
      }
      /** 删除素材 **/
      const handleDeleteMaterial = (row) => {
        const title = materialType.value == 'image' ? '确定要删除图片素材 ' + row.name + ' 吗？' : '确定要删除视频素材 ' +row.name + ' 吗？'
        ElMessageBox.confirm(title, '删除素材', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (materialType.value == 'image') {
            deleteMaterialFormData.imgids.push(row.imgid)
            deletePackageRelImage(deleteMaterialFormData).then(response => {
              if (response.errcode == 0) {
                deleteMaterialFormData.imgids = []
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                getDataList()
              }
            })
          } else {
            deleteMaterialFormData.videoids.push(row.videoid)
            deletePackageRelVideo(deleteMaterialFormData).then(response => {
              if (response.errcode == 0) {
                deleteMaterialFormData.videoids = []
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                getDataList()
              }
            })
          }
        }).catch(() => {})
      }
      /** 开启添加素材弹框 **/
      const handleCreateMaterial = () => {
        materialForm.datas = []
        if (materialType.value == 'image') {
          dialogImageTitle.value = '添加图片素材'
          dialogImageMediatype.value = 'package'
          dialogImageVisible.value = true
          nextTick(() => {
            relImageMediumRef.value.init()
          })
        } else {
          dialogVideoTitle.value = '添加视频素材'
          dialogVideoMediatype.value = 'package'
          dialogVideoVisible.value = true
          nextTick(() => {
            relVideoMediumRef.value.init()
          })
        }
      }
      /** 关闭添加图片素材弹框 **/
      const handleCancelRelImageDialog = () => {
        dialogImageVisible.value = false
      }
      /** 关闭添加视频素材弹框 **/
      const handleCancelVideoDialog = () => {
        dialogVideoVisible.value = false
      }

      const init = () => {
        getDataList()
      }

      return {
        queryList,
        isloading,
        materialType,
        tableData,
        getDataList,
        materialTypeList,
        handleCreateMaterial,
        handleFilter,
        init,
        formatSize,
        getImageUrl,
        imgSrcList,
        getLayoutName,
        getVideoTypeName,
        videoType,
        videoSrc,
        videoPlayRef,
        videoTitle,
        videoAutoPlay,
        videoDialogVisible,
        cancelVideoJs,
        handleVideoPlay,
        handleDeleteMaterial,
        materialForm,
        dialogImageMediatype,
        dialogImageTitle,
        dialogImageVisible,
        relImageMediumRef,
        handleCancelRelImageDialog,
        dialogVideoMediatype,
        dialogVideoTitle,
        dialogVideoVisible,
        relVideoMediumRef,
        handleCancelVideoDialog
      }
    }
  }
</script>

<style scoped>

</style>
